<template>
  <div class="item-form-button">
    <a-list size="small">
      <a-list-item v-for="(item, idx) in operations" :key="idx">
        <a-list-item-meta :title="item.name" :description="item.content">
        </a-list-item-meta>
        <template #actions>
          <a-switch
            v-model="buttonAuth[item.code]"
            :disabled="buttonDisabled[item.code]"
            type="round"
          >
            <template #checked>开</template>
            <template #unchecked>关</template>
          </a-switch>
        </template>
      </a-list-item>
    </a-list>
  </div>
</template>

<script setup>
import { ref, onMounted, toRaw } from "vue";
import { v4 } from "uuid";
import { initNodeButtonAuth } from "./common/ButtonAuth";
import { NODE } from "@/components/flow/common/FlowConstant";

const props = defineProps({
  flowNodeConfig: { type: Object },
});
const buttonDisabled = ref({
  save: false,
  submit: false,
  agree: false,
  reject: false,
  turn: false,
  back: false,
  revoke: false,
});
const buttonAuth = ref({
  save: false,
  submit: false,
  agree: false,
  reject: false,
  turn: false,
  back: false,
  revoke: false,
});
const operations = ref([
  {
    id: v4(),
    name: "保存",
    content: "发起节点保存操作，审批节点下无保存操作，可在草稿箱查看",
    code: "save",
  },
  {
    id: v4(),
    name: "提交",
    content: "发起节点填写完申请单，,提交流程到下一步，可在我发起的查看",
    code: "submit",
  },
  {
    id: v4(),
    name: "同意",
    content: "审批节点同意该审核之操作，审批通过，可在我已办查看",
    code: "agree",
  },
  {
    id: v4(),
    name: "拒绝",
    content: "拒绝后流程回到上个节点，标记为已拒绝",
    code: "reject",
  },
  {
    id: v4(),
    name: "转交",
    content: "转交给他人办理，依然在当前节点",
    code: "turn",
  },
  /* {
    id: v4(),
    name: "退回",
    content: "退回给申请人，申请人修改完成后，流程按节点开始走",
    code: "back",
  }, */
  {
    id: v4(),
    name: "回退",
    content: "允许选择回退到流程的任意节点，修改完成后，流程按节点开始走",
    code: "back",
  },
  {
    id: v4(),
    name: "撤回",
    content:
      "允许申请人对未进入流程（第一个流程节点为待处理状态）的申请进行撤回",
    code: "revoke",
  },
]);
onMounted(() => {
  initNodeButtonAuth(props.flowNodeConfig);
  buttonAuth.value = props.flowNodeConfig?.buttonAuth;
  const node = props.flowNodeConfig;
  if (node.type == NODE.APPROVE) {
    buttonDisabled.value.save = true;
    buttonDisabled.value.submit = true;
  } else if (node.type == NODE.TRANSACT) {
    buttonDisabled.value.submit = false;
  } else {
    buttonDisabled.value.agree = true;
    buttonDisabled.value.reject = true;
    buttonDisabled.value.turn = true;
    buttonDisabled.value.back = true;
    buttonDisabled.value.revoke = true;
  }
});
</script>

<style lang="less">
.item-form-button {
  .arco-list-item-meta-title {
    font-size: 16px;
  }
  .arco-list-item-meta-description {
    font-size: 12px;
  }
}
</style>
